window.onload=function (ev) {

    search();
    banner();
    downTime();

}
// function serach() {
//
// }
//搜索顶部栏
let search=()=>{
  //  01,获取顶部一集banner的高度
  let topSearch = document.querySelector(".jd_search");/*获取京东头部搜索栏*/
  let banner=document.querySelector(".jd_banner"); //获取banner
   // console.log(topSearch)
  let bannerHeight =banner.offsetHeight; /*获取banner高度*/
  // console.log(bannerHeight)
    /*02监听页面滚动*/
   window.onscroll=()=> {
       //01.获取页面滚动距离
       let topDistance=document.body.scrollTop||document.documentElement.scrollTop;/*谷歌写法*/

       // let topDistance=document.documentElement.scrollTop;/*ie写法*/
       let opacity=0;
       //判断显示是否是透明度
       if(bannerHeight>topDistance){
/*当滚动的距离超过了轮播图的距离的时候,保持不变*/
             opacity=.85;
       }else{
       //当页面滚动的时候,随着页面的距离变大 透明变大
           opacity=.85*(bannerHeight /topDistance);
       }
       // console.log(topDistance)
       topSearch.style.background="rgba(216,80,92,'+opacity+')"
   }


}
//banner
let banner = ()=>{
//  ***自动滚动
    /*
    * 1. 无缝滚动 & 无缝滑动(定时器,,过渡,位移)
    *
    * 2.点盒子对应改变(改变当前样式)
    *
    * 3..可以滑动 (touch事件,监听触摸点改变坐标距离 ,位移)
    *
    * 4.滑动距离不够的时候,吸附回去(过渡 ----位移 )
    *
    * 5.滑动距离够了的时候,跳转,上一张,下一张(判断方向,过渡 位移)
    * */
/*获取需要操作dom 的元素*/
    let banner=document.querySelector(".jd_banner");
    var width = banner.offsetWidth;/*轮播图宽度*/
//    图片容器
    let imageBox =banner.querySelector("ul:first-child");
    /*ul:first是jquery封装的选择器,css当中无效的*/
    // console.log(imageBox)
     /*点容器*/
     let pointBox =banner.querySelector("ul:last-child");
     let points=pointBox.querySelectorAll("li");
     // console.log(points)
    /*提几个公共的方法*/

    //   加过渡
    let addTransition=()=>{
        imageBox.style.transition='all 0.2s';
        imageBox.style.webkitTransition='all 0.2s';
    }
    /*清过渡*/
    let removeTransition=()=>{
        imageBox.style.transition='none';
        imageBox.style.webkitTransition='none';
    }
    //定位;设置位置
    let setTranslateX=(translateX)=>{
        imageBox.style.transform='translateX('+translateX+'px)' /*移动轮播图宽度*/
        imageBox.style.webkitTransform='translateX('+translateX+'px)'
    }

    /*无缝滚动,过渡,移动*/
    let timer,index=1;
    timer=setInterval(()=>{
        index++;
    //    过渡效果
        addTransition()
        setTranslateX(-index * width)


    },1000)
  /*怎样监听过渡结束这个时间点,过渡结束事件*/
    imageBox.addEventListener('transitionend',()=>{
        //无缝滚动
        if(index>=9){
            /*瞬间定位到第一张*/
            index=1

        /*瞬间移动过去,清除过渡*/
            removeTransition()
        /*定位*/
            setTranslateX(-index * width)
        }else if(index<=0){
            index=8
            removeTransition();
            setTranslateX(-index * width);
        }
        setPoint()
        /*正常 取值范围 1-8 ,对应的点的0---7*/
    })
    let setPoint=()=>{
        /*index 1-8*/
    //    去除默认的样式
        for (var i =0;i<points.length;i++){
            points[i].classList.remove('now')
        }
    //    给对应的加上
        points[index-1].classList.add('now')
    }
    /*可以滑动(touch 事件,监听触摸点坐标改变距离)*/
      let staetX=0; /*记录X轴的坐标*/
      let translateX =0; /*记录坐标位置移动的开始*/
      let isMove =false;
    imageBox.addEventListener('touchstart',(e)=>{
        clearInterval(timer)
    //    记录开始的位置
         startX = e.touches[0].clientX; /*当前x的坐标*/
        //console.log(startX)

    });
    imageBox.addEventListener('touchmove',(e)=>{
         let moveX = e.touches[0].clientX;
         distanceX =moveX -startX
        /*distanceX 大于0 的时候,向右滑动*/
        let translateX =-index *width +distanceX
        /*清除过渡*/
        removeTransition();
        setTranslateX(translateX);
        isMove=true
    });
    imageBox.addEventListener('touchend',(e)=>{
      /*有一个范围*/
      if(isMove){
          if (Math.abs(distanceX)<width/3){
          //   滑动距离不够的时候,吸附回去(过渡 ----位移 )
              /*位移*/
              addTransition();
              setTranslateX(-index * width);
          }else{
          //  滑动距离够了的时候,跳转,上一张,下一张(判断方向,过渡 位移)
              if(distanceX>0){
                  /*向右滑  上一张*/
                  index--;
              }else{
                  /*向左滑 下一张*/
                  index++
              }
              /*加过渡*/
              addTransition()
              setTranslateX(-index * width);
          }
      }
       clearInterval(timer);/**/
        timer=setInterval(()=>{
            index++;
            //    过渡效果
            addTransition()
            setTranslateX(-index * width)


        },3000);
        /*重置参数*/
        staetX=0;
        translateX=0;
        isMove=false
    })
}
//倒计时
var downTime =()=>{
// 模拟倒计时的时间 是11个小时
    /*
    * 利用定时器 1 秒一次 重新展示时间
    *
    *
    * */
    var time =60 * 60 * 11
    /*拿到黑色的框框*/
    let skTime  =document.querySelector(".sk_time")
    let spans =skTime.querySelectorAll('span')
    // let timer =null;
    var timer =setInterval(()=> {
        time --;
        /*需要格式化时间*/
        let h = Math.floor(time /3600 ) ;//小时
        let m =Math.floor(time % 3600 / 60) ;//分钟
        let s =time % 60 ;
        //    设置时间
        spans[0].innerHTML =Math.floor(h/10);
        spans[1].innerHTML =h % 10;

        spans[3].innerHTML =Math.floor(m/10);
        spans[4].innerHTML =m % 10;

        spans[6].innerHTML =Math.floor(s/10);
        spans[7].innerHTML =s % 10;
        if(time<=0){
            clearInterval(timer)
        }
    })

}

